<template>
  <div class="iLike fill pnx flex-col">
    <div class="title pl">我喜欢</div>
    <ul class="nav flex-row">
      <li @click="nav.activeLabel = item.label" v-for="item in nav.list" :key="item.label"
          :class="{active: item.label===nav.activeLabel}">
        <span>{{ item.label }}{{ item.count ? item.count : "" }}</span></li>
    </ul>
    <div class="flex-1 content">
      <div v-show="nav.activeLabel==='歌曲'">
        <ListDisplay :list="like.song"/>
      </div>
      <div v-show="nav.activeLabel==='专辑'">
        <AlbumUnit :size="200" v-for="item in like.album" :key="item.mid" :meta="item"/>
      </div>
      <div v-show="nav.activeLabel==='歌单'">
        <AlbumUnit :size="200" v-for="item in like.songList" :key="item.mid" :meta="item"/>
      </div>
      <div v-show="nav.activeLabel==='歌手'">
        <AlbumUnit :size="200" v-for="item in like.singer" :key="item.mid" :meta="item"/>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator"
import Vue from "vue"
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";
import {State} from "vuex-class";
import {Song} from "@/ts.d/classes/Song";
import {AlbumItem} from "@/ts.d/classes/AlbumItem";
import {SongListItem} from "@/ts.d/classes/SongListItem";
import {Singer} from "@/ts.d/classes/Singer";
import AlbumUnit from "@/components/albumUnit/AlbumUnit.vue";

@Component({
  components: {AlbumUnit, ListDisplay}
})
export default class ILike extends Vue {
  @State("like") like!: {
    song: Song[];
    album: AlbumItem[];
    songList: SongListItem[];
    singer: Singer[];
  }


  nav = {
    list: [{label: "歌曲", count: 0},
      {label: "专辑", count: 0},
      {label: "歌单", count: 0},
      {label: "歌手", count: 0},],
    activeLabel: "歌曲"
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.title {
  font-weight: 600;
  font-size: 35px;
}

.nav {
  li {
    padding: $pn $pl;
    margin-right: $mn;
    cursor: pointer;
  }

  .active {
    span {
      position: relative;
      color: $text-success;
    }

    span:after {
      content: "";
      width: 150%;
      height: 4px;
      background-color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $border-radius-s;
      bottom: -6px;
    }
  }
}

.content{
  overflow-y: auto;
}
</style>
